require(['./config'],()=>{
  require(['template','url','header','fly','zoom','footer'],(template,url,header)=>{
    //面向对象编程
    class Detail{
      constructor(){
        //调方法
          this.getData().then(() => {
          this.renderDetail()
          this.addToCart()
          this.zoom()
        })
        // this.flyToCart()
      }
      //写方法
      getData(){
       //得到前端传来的id值(id是通过?id={{item.id}}拼接在地址上的) 通过id的值 来渲染id对应的商品的详情信息
        const id = Number(window.location.search.slice(4))
        return new Promise(resolve => {
        // console.log(id)
        //得到id发送请求，得到真实的id再渲染详情页，但是 我们用的是rap2假接口(我去rap2造接口，完事回来)
        $.get(url.base + '/detail',{id},resp=>{
          //已经请求到数据，可以开始渲染前端了
          // console.log(resp.body.detail)
          //把数据返回给前端
        if(resp.code===200) {
          const {detail} = resp.body
          //按道理应该可以渲染了 但是 首先 这个detail里没有id 因为用的是rap2接口 detaill里没有正确的id值  手动加上去
          //就加上面的那个 这个详情数据detail以后还要用于加购物车，所以需要存起来
          //把返回的detail展开加上id字段写给this对象，这样别的方法也能访问detail了,...扩展运算符 把数组变为参数序列
          this.detail={...detail,id}
          // this.renderDetail()
          resolve()
        }
        })
       })
      }
      //渲染detail详情页
      renderDetail(){
       //  console.log(this.detail)
       //由于模板引擎里每一个字段都是分开写的，所以我们需要展开传
      $('.contain-wrap').html(template('templateDetail',{...this.detail}))
    
      }
      //添加购物车 一个飞入购物车效果
      addToCart() {
        //得到的东西 length为0 说明没找到，这是因为虽然添加按钮是写死的，但是它也在模板引擎里，那就是
        //表明是通过模板引擎渲染的。这明显是异步，可以通过Promise和事件委托来处理，但是Promise更好，因为
        //事件委托的话，只要点击的是子元素都会去判断，这不合适 用Promise。
        $('.pay-cart').on('click',e => {
          //调用飞入方法
          this.fly(e)
          //开始存数据 localstorage以键值对形式存进去,这个详情数据是一个对象（json数据），但是localstorage只能存字符串，所以转化为字符串再存进去
          //先取，然后再考虑存的事情
          let cart =localStorage.getItem('cart')
          //说明已经有数据了
          //把数据取出来放进一个数组里
          //判断当前这条数据在不在之前已有的这个数据里(数组的some()方法，用id做判断条件)，如果不在，push进这个数组，连同新增的count属性，存在的话count++

            if(cart){
               //转化成数组(便于some()遍历
               cart = JSON.parse(cart)
               //some()方法只要找到一个符合条件就会停止下来，返回true，这个index就是第一次找到的符合条件的下标index
               //shop遍历得到的数组中的每一个元素
            const isExist =  cart.some((shop,index) => {
                 return shop.id===this.detail.id
               })
               //表明在之前这条数据已经存在 ，那么count++
               if(isExist){
                 //已存在 map()修改数组，返回新数组，不改原来数组
                cart = cart.map(shop => {
                  if (shop.id === this.detail.id) shop.count++
                  return shop
                })
               }
               //表明之前并不存在，那么push 进数组 连同新增的count属性 第一次 最后转为字符串统一存localstorage
               else{
                    cart.push({
                      ...this.detail,
                      count:1,
                      check:true
                    })
               }
               localStorage.setItem('cart',JSON.stringify(cart))
            }
          //说明没有数据，那么就把这个数据单独存进一个数组，新增一个count属性，默认值为1一起存进localstorage里
          //创建一个数组(只有当前数据一条数据的数组)，再存进去
           else{
              localStorage.setItem('cart',JSON.stringify([{
                ...this.detail,
                count:1,
                check:true
              }]))
           }
           header.calcTotalNum()
        })
      
      }
  
    //计算总的商品数量
  


          //购物车添加按钮的逻辑里单独分离这个飞入购物车效果fly()
          // 抛物线效果
      fly(e){
          $(`<img src="${this.detail.imgs[0]}" style="width: 30px;height:30px;border-radius:50%">`).fly({
            start:{
              left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
              top: e.clientY,  //开始位置（必填）
            },
            end:{
              left: $('.cartbag').position().left, //结束位置（必填）
              top: $('.cartbag').position().top  //结束位置（必填）
              
            },
            speed: 1, //越大越快，默认1.2
            vertex_Rtop: 20, //运动轨迹最高点top值，默认20
            onEnd: function(){
              this.destroy()
            } //结束回调
          })
          e.preventDefault()
      }
     //放大镜插件实现放大镜效果
     zoom () {
      $('.zoom-image').elevateZoom({
        // 传递所有小图的父级容器的id
        gallery: 'gal1'
      })
    }
    }
    return new Detail()
  })
})